<template>
    <div class="kanban">
        <el-input placeholder="搜索数据" v-model="searchData" class="input-with-select">
            <el-button type="primary" slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <div v-for="(item,index) in listData" :key="index">
            <el-divider/>
            <div class="item">
                <p class="title"><img src="../../assets/images/8186664.jpg" alt="">{{item.analyzeName}}<span>{{item.homeUrl}}</span><span class="ant-tag-blue" v-for="(dom,i) in item.analyzeTag" :key="'dom'+i">{{dom}}</span>
                    <el-button type="primary" size="small">查看数据</el-button>
                </p>
                <p class="descriptions-title">{{item.analyzeName}}</p>
                <table border="0" cellspacing="1" cellpadding="0">
                    <tr>
                        <th>数据名称</th>
                        <td colspan="1">{{item.analyzeName}}</td>
                        <th>上次启动时间</th>
                        <td colspan="1">{{item.lastStartTimeStr||'未启动'}}</td>
                        <!--<th>下载大小</th>-->
                        <!--<td colspan="1">{{getFileSize(item.downloadTotalSize)}}</td>-->
                        <!--<th>分析文件数</th>-->
                        <!--<td colspan="1">{{item.analyzeFinished + '/' + item.analyzeTotal}}</td>-->
                    </tr>
                    <tr>
                        <th>首页地址</th>
                        <td colspan="1">{{item.homeUrl}}</td>
                        <th>创建时间</th>
                        <td colspan="3">{{item.createTime}}</td>
                    </tr>
                    <!--<tr>-->
                        <!--<th>状态</th>-->
                        <!--<td colspan="1" v-if="item.toStateObj !==undefined"><span :class="item.toStateObj.key"></span>{{item.toStateObj.value}}</td>-->
                        <!--<td colspan="1" v-else><span></span>停止</td>-->
                        <!--<th>分享进度</th>-->
                        <!--<td colspan="3">-->
                            <!--<el-progress v-if="item.progress==100||item.progress>100" :percentage="100" status="success"></el-progress>-->
                            <!--<el-progress v-else :percentage="item.progress"></el-progress>-->
                        <!--</td>-->
                    <!--</tr>-->
                    <!--<tr>-->
                        <!--<th>上次启动时间</th>-->
                        <!--<td colspan="1">{{item.lastStartTimeStr||'未启动'}}</td>-->
                        <!--<th>分析用时</th>-->
                        <!--<td colspan="1">{{getTime(item.analyzeCostTime)}}</td>-->
                        <!--<th>过滤数量</th>-->
                        <!--<td colspan="1">{{item.analyzeFiltered+item.analyzeFailed}}</td>-->
                    <!--</tr>-->
                </table>
                <div class="contentLink">
                    <el-button type="text" icon="el-icon-share">分享</el-button>
                    <el-button type="text" icon="el-icon-view">预览</el-button>
                    <el-button type="text" icon="el-icon-download">下载</el-button>
                </div>
            </div>
        </div>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="page"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pageSize"
                layout="sizes, prev, pager, next"
                :total="alltotal">
        </el-pagination>
        <el-divider/>
        <el-input placeholder="搜索数据" v-model="searchData" class="input-with-select">
            <el-button type="primary" slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-divider/>
        <div class="ant-descriptions">
            <div class="ant-descriptions-title">联系我</div>
            <div class="ant-descriptions-view">
                <table>
                    <tbody>
                    <tr class="ant-descriptions-row">
                        <td colspan="1" class="ant-descriptions-item"><span
                                class="ant-descriptions-item-label ant-descriptions-item-colon">E-mail</span><span
                                class="ant-descriptions-item-content">zhongbo1988@yandex.com</span></td>
                        <td colspan="1" class="ant-descriptions-item"><span
                                class="ant-descriptions-item-label ant-descriptions-item-colon">Telephone</span><span
                                class="ant-descriptions-item-content">+86.13709061234</span></td>
                        <td colspan="1" class="ant-descriptions-item"><span
                                class="ant-descriptions-item-label ant-descriptions-item-colon">Live</span><span
                                class="ant-descriptions-item-content">Chengdu, SiChuan</span></td>
                    </tr>
                    <tr class="ant-descriptions-row">
                        <td colspan="1" class="ant-descriptions-item"><span
                                class="ant-descriptions-item-label ant-descriptions-item-colon">Remark</span><span
                                class="ant-descriptions-item-content">Writer</span></td>
                        <td colspan="2" class="ant-descriptions-item"><span
                                class="ant-descriptions-item-label ant-descriptions-item-colon">Address</span><span
                                class="ant-descriptions-item-content">No. 57-2-3101, XinYiHuaYuan Road, ZhongHe District, Chengdu, SiChuan, China</span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    import {WebSiteTask,WebTranslateTask} from '../../api/api'
    import {toState} from '../../utils/common'
    export default {
        name: "kanban",
        data() {
            return {
                searchData: '',
                page:1,
                pageSize:5,
                alltotal:1,
                listData:[],
            }
        },
        components: {},
        mounted(){
            this.getListData();
        },
        methods:{
            getTime(time){
                let lastTime='0秒';
                if(time===1000) lastTime='1秒';
                else if(time>1000 &&time<60000) lastTime=(time / 1000).toFixed(1)+'秒';
                else if(time===60000) lastTime='1分钟';
                else if(time>60000&&time<3600000) lastTime=(time / 60000).toFixed(1)+'分钟';
                else if(time===3600000) lastTime='1小时';
                else if(time>3600000)lastTime=(time / 3600000).toFixed(1)+'小时';
                return lastTime
            },
            getFileSize(fileByte) {
                var fileSizeByte = fileByte;
                var fileSizeMsg = '0KB';
                if (fileSizeByte < 1048576) fileSizeMsg = (fileSizeByte / 1024).toFixed(1) + "KB";
                else if (fileSizeByte == 1048576) fileSizeMsg = "1MB";
                else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824) fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(1) + "MB";
                else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824) fileSizeMsg = "1GB";
                else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776) fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(1) + "GB";
                else if (fileSizeByte > 1099511627775)fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024*1024)).toFixed(1) + "TB";
                return fileSizeMsg;
            },
            handleSizeChange(val){
                this.page=1;
                this.pageSize=val;
                this.getListData()
            },
            handleCurrentChange(val){
                this.page=val;
                this.getListData()
            },
            extend(target, source) {
                for (var obj in source) {
                    target[obj] = source[obj];
                }
                return target;
            },
            async getListData(){
                // WebTranslateTask({
                //     current:this.page,
                //     size:this.pageSize
                // }).then(res=>{
                //     console.log(res,'res')
                // });
                WebTranslateTask({
                    current:this.page,
                    size:this.pageSize
                }).then(data=>{
                    data.data.records.forEach(item=>{
                        WebSiteTask({
                            current:1,
                            size:10,
                            idWebSiteTask:item.idWebSiteTask
                        }).then(res=>{
                            if(res.data.records.length!==0){
                                item = this.extend(item,res.data.records[0]);
                                item.toStateObj=toState('' + res.data.records[0].taskState);
                                item.progress = Math.floor((item.analyzeFinished + item.analyzeFiltered + item.analyzeFailed) * 10000 / item.analyzeTotal) ? Math.floor((item.analyzeFinished + item.analyzeFiltered + item.analyzeFailed) * 10000 / item.analyzeTotal) / 100 : 0
                            }else{
                                item.toStateObj={ key: 'default', value: '停止' };
                                item.progress = 0
                            }
                            // if(index === data.data.records.length - 1){
                            // }
                        })
                    });
                    this.listData=data.data.records;
                    this.alltotal = data.data.total
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .kanban {
        padding-bottom: 24px;
        ::v-deep {
            .el-input-group--append {
                .el-input-group__append {
                    background: #1890ff;
                    color: #fff;
                }
            }
        }
        .item {
            border: 1px solid rgb(235, 237, 240);
            padding: 24px;
            .title {
                line-height: 32px;
                color: rgba(0, 0, 0, 0.85);
                font-weight: 600;
                font-size: 24px;
                margin-bottom: 16px;
                img {
                    height: 32px;
                    border-radius: 50%;
                    vertical-align: middle;
                    margin-top: -2px;
                    margin-right: 12px;
                }
                span {
                    display: inline-block;
                    margin-left: 12px;
                    color: rgba(0, 0, 0, 0.45);
                    font-size: 14px;
                    line-height: 22px;
                    font-weight: 400;
                    margin-right: 8px;
                }
                .ant-tag-blue{
                    color: #1890ff;
                    background: #e6f7ff;
                    font-feature-settings: 'tnum';
                    display: inline-block;
                    height: auto;
                    margin-left: 0;
                    margin-right: 8px;
                    padding: 0 7px;
                    font-size: 12px;
                    line-height: 20px;
                    white-space: nowrap;
                    border: 1px solid #91d5ff;
                    border-radius: 4px;
                    cursor: default;
                    font-weight: 400;
                }
                .el-button {
                    float: right;
                }
            }
            table {
                width: 100%;
                background: #e8e8e8;
                td {
                    background: #fff;
                    padding: 16px 24px;
                    text-align: left;
                    color: rgba(0, 0, 0, 0.65);
                    font-size: 14px;
                    span{
                        display: inline-block;
                        height: 6px;
                        width: 6px;
                        background: #d9d9d9;
                        border-radius: 50%;
                        vertical-align: middle;
                        margin-right: 10px;
                        margin-top: -2px;
                    }
                    .processing{
                        background: #1890ff;
                    }
                    .success {
                        background-color: #52c41a;
                    }
                    .error {
                        background-color: #f5222d;
                    }
                }
                th{
                    background: #fafafa;
                    padding: 16px 24px;
                    text-align: left;
                    color: rgba(0, 0, 0, 0.85);
                    font-weight: normal;
                    font-size: 14px;
                    line-height: 1.5;
                }
            }
            .descriptions-title {
                margin-bottom: 20px;
                color: rgba(0, 0, 0, 0.85);
                font-weight: bold;
                font-size: 16px;
                line-height: 1.5;
            }
            .contentLink {
                margin-top: 10px;
                ::v-deep {
                    .el-button {
                        i {
                            font-size: 24px;
                            vertical-align: middle;
                            margin-top: -2px;
                        }
                    }
                }
            }
        }
        ::v-deep {
            .el-pagination {
                margin: 20px 0;
                text-align: center;
            }
        }
        .ant-descriptions{
            .ant-descriptions-title {
                margin-bottom: 20px;
                color: rgba(0, 0, 0, 0.85);
                font-weight: bold;
                font-size: 16px;
                line-height: 1.5;
            }
            .ant-descriptions-view {
                width: 100%;
                overflow: hidden;
                border-radius: 4px;
                table {
                    width: 100%;
                    table-layout: fixed;
                }
                .ant-descriptions-row > th, .ant-descriptions-row > td {
                    padding-bottom: 16px;
                }
                .ant-descriptions-item > span {
                    display: inline-block;
                }
                .ant-descriptions-item-label {
                    color: rgba(0, 0, 0, 0.85);
                    font-weight: normal;
                    font-size: 14px;
                    line-height: 1.5;
                    white-space: nowrap;
                }
                .ant-descriptions-item-content {
                    display: table-cell;
                    color: rgba(0, 0, 0, 0.65);
                    font-size: 14px;
                    line-height: 1.5;
                }
            }
        }
    }
</style>